<template>
  <Card title="商机信息" line>
    <template v-slot:right>
      <Button type="primary" @click="toCRM">查询</Button>
      <Button type="primary" @click="$refs.table.showSetting = true">设置表格样式</Button>
    </template>
    <div>
      <table-box ref="table" no-request :other-filters="otherFilters" :table-height="220" :table-config="tableConfig" @data-change="dataChange" />
    </div>
  </Card>
</template>
<script>
import Card from '@/components/Card'
import { filtersRaw } from '@/utils'
export default {
  name: 'DisplayCRM',
  components: {
    Card
  },
  props: {
    callTel: {
      type: String,
      default: ''
    },
    callid: {
      type: String,
      default: ''
    },
    recordId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [], // 当前表格数据
      // CRM线索记录
      tableConfig: {
        interfacePath: `/call-center/api/v2/crm/opty/page`,
        pageFlag: true,
        hideFuncBar: false,
        tabIndex: 10,
        sort: 'createTime',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            minWidth: '80',
            formatData: (v) => v.keyIndex + 1,
            align: 'center'
          },
          {
            prop: 'clueCustomerCode',
            minWidth: 120,
            label: '客户编码',
            render: (_, row) => {
              return (
                <Button type='text' onClick={this.toBusiness.bind(this, row)}>
                  {row.clueCustomerCode}
                </Button>
              )
            }
          },
          {
            prop: 'name',
            minWidth: 120,
            label: '客户姓名'
          },
          {
            prop: 'thirdSource',
            label: '来源渠道',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_TERTIARY_SOURCE'
            }
          },
          {
            prop: 'clueCustomerType',
            label: '客户类型',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_TYPE'
            }
          },
          {
            prop: 'callStatus',
            label: '接听状态',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CALL_STATE'
            }
          },
          {
            prop: 'submitTime',
            minWidth: 140,
            label: '报名时间'
          },
          {
            prop: 'receptionCcName',
            minWidth: 120,
            label: '接待客服'
          },
          {
            prop: 'disName',
            minWidth: 140,
            label: '服务经销商'
          },
          {
            prop: 'clueCustomerLogo',
            label: '客户标识',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_LOGO'
            }
          },
          {
            prop: 'abnormalLogo',
            label: '异常标识',
            minWidth: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'top2-crm',
              dictTypeCode: 'CRM_CUSTOMER_ABNORMAL_LOGO'
            }
          },
          {
            prop: 'operation',
            label: '操作',
            align: 'center',
            fixed: 'right',
            render: (_, row) => {
              return (
                <Button type='primary' disabled={row.disabled} onClick={this.relevance.bind(this, row)}>关联</Button>
              )
            }
          }
        ]
      }
    }
  },
  computed: {
    otherFilters() {
      return this.callTel ? [filtersRaw('phone', this.callTel, '=')] : []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 跳转到crm
    toCRM() {
      this.$router.push({ name: 'Examine', query: { accntPhoneOp: this.callTel }})
    },
    // 获取当前表格数据
    dataChange(data) {
      try {
        this.tableData = data.data.records
        this.tableData.forEach(e => {
          this.$set(e, 'disabled', false)
        })
      } catch (error) {
        this.tableData = []
      }
    },
    // 关联
    relevance(row) {
      this.tableData.forEach(e => { e.disabled = false })
      this.$set(row, 'disabled', true)
      this.$emit('relevance', row)
    },
    initData() {
      this.$nextTick(() => {
        this.$refs.table.initTableData()
      })
    },
    // 商机查看
    toBusiness(row) {
      this.$router.push({ name: 'WaitCallOutEdit', query: { id: row.id }})
    }
  }
}
</script>
<style lang='scss' module>

</style>
